<!--
 * @author: Spring
 * @create: 2021-06-23 19:36 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-05 14:25 PM
 * @desc: 
-->
<template>
  <div class="container">
    <publicnav style="zindex: 200" />
    <!-- <leftnav /> -->
    <releaseboilingpoint class="boilingpoint" v-show="screenWidth > 980" />
    <boilingpointlist
      class="boilingpointlist"
      v-for="(item, index) in listArr"
      :key="index"
      :info="item"
      :style="{ zIndex: 9999 - index-100 }"
    />
    <!-- 右侧 -->
    <div class="body-rigth">
      <Log v-if="height < 500" />
      <Intro />
    </div>
  </div>
</template>

<script>
import Log from "@/components/Unloginrside/Log.vue";
import Intro from "@/components/Unloginrside/Intro.vue";
import { hot, concernList } from "/utils/api.js";
import publicnav from "@/components/PublicNav";
import boilingpointlist from "@/components/BoilingPointList.vue";
import releaseboilingpoint from "@/components/ReleaseBoilingPoint.vue";
import leftnav from "@/components/Boilingpoint/Leftnav.vue";
import { mapState } from "vuex";
import $ from "jquery";

export default {
  data() {
    return {
      listArr: [],
      screenWidth: 0,
      page: 0,
      selfinfo: "",
      bottomOfWindow: 0,
      height: 0,
      loading: false,
      // size: 10,
      // tag_id:this.$store.state.tag_id
    };
  },
  computed: {
    ...mapState(["tag_id"]),
  },
  watch: {
    tag_id(val, oldVal) {
      console.log(val, oldVal);
      this.listArr = [];
      this.page = 0;
      this.getHot();
    },
  },
  components: {
    Log,
    Intro,
    publicnav,
    boilingpointlist,
    releaseboilingpoint,
    leftnav,
  },
  mounted() {
    this.onresize();
    this.scroll();
    this.self();
  },
  methods: {
    self() {
      let user_id
      if (!this.$store.token) {
        user_id=555
      }else{
        userid=this.$store.state.info.user_id
      }
      concernList({ user_id}).then((res) => {
        console.log(res.data, 111);
        this.$store.commit("setFansInfo", res.data);
        this.getHot();
      });
    },
    onresize() {
      this.screenWidth = document.body.clientWidth;
      window.onresize = () => {
        //屏幕尺寸变化就重新赋值
        return (() => {
          this.screenWidth = document.body.clientWidth;
        })();
      };
    },
    scroll() {
      $(window).scroll(() => {
        var scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop; // 页面高度差
        var pageHeight = $(document).height(); //整个html页面高度
        var viewHeight = $(window).height(); //窗口的高度
        this.height = scrollTop;
        if (pageHeight - viewHeight - scrollTop <= 200 && !this.loading) {
          this.getHot();
        }
      });
    },
    //获取沸点 帖子
    getHot() {
      this.loading = true;
      console.log("gethot");
      this.page++;
      let obj = {
        page: this.page,
        // size: this.size,
        type: 2,
      };
      if (this.$store.state.tag_id) {
        obj.tag_id = this.$store.state.tag_id;
      }

      hot(obj).then((res) => {
        res.data.data.forEach((ele) => {
          let b = new Date().getTime() - ele.updated_at * 1000;
          let a = Math.ceil((b % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          if (a > 12) {
            ele.updated_at = Math.floor(a / 12) + "天前";
          } else {
            ele.updated_at = a + "小时前";
          }
          if (ele.nick_name == null) {
            ele.nick_name = "程序员13";
          }
          if (ele.title == null) {
            ele.title = "阿里巴巴：服务化管理7000+ 个项目组件资产";
          }
          if (ele.pic == null) {
            ele.pic =
              "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1602c6796cc46dfa201834697b7e96a~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp";
          }
          if (ele.tags.length > 0) {
            this.hottag = "flex";
          }
          if (this.$store.state.token) {
            let flag = this.$store.state.fansinfo.my_concern.some((item) => {
              return item.user_id == ele.user_id;
            });
            if (flag) {
              ele.isgz = true;
            } else {
              ele.isgz = false;
            }
          }
        });
        this.loading = false;
        this.listArr = [...this.listArr, ...res.data.data];
        console.log(this.listArr);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.boilingpoint {
  margin: 0 auto;
  margin-top: 10px;
  z-index: 9998;
  position: relative;
}
.boilingpointlist {
  margin: 0 auto;
  margin-top: 10px;
  z-index: 100;
  position: relative;
}
.body-rigth {
  position: fixed;
  top: 70px;
  right: 300px;
}
</style>
